<!-- eslint-disable -->
<template>
  <view class="mxp-app-video" :style="[cusStyle]">
    <app-video
      ref="appVideoRef"
      :src="src"
      :id="id"
      :autoplay="autoplay"
      :loop="loop"
      :objectFit="objectFit"
      :muted="muted"
      :poster="poster"
      :safeAreaInsetsBottom="safeAreaInsetsBottom"
      @pause="emits('pause')"
      @play="emits('play')"
      @ended="emits('ended')"
      @error="emits('error')"
      @loadstart="emits('loadstart')"
      @myClick="emits('myClick')"
      @maskChange="(val) => emits('maskChange', val)"
      @loadedmetadata="(val) => emits('loadedmetadata', val)"
    ></app-video>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import AppVideo from './components/app-video.vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';

  defineProps({
    /** id */
    id: { type: String, default: '' },
    /** 视频链接 */
    src: { type: String, default: '' },
    /** 自动播放 */
    autoplay: { type: Boolean, default: false },
    /** 是否循环播放 */
    loop: { type: Boolean, default: false },
    /** 视频裁剪方式 */
    objectFit: { type: String, default: 'cover' },
    /** 是否静音播放 */
    muted: { type: Boolean, default: false },
    /** 海报 */
    poster: { type: String, default: '' },
    /** 底部安全距离 */
    safeAreaInsetsBottom: { type: Number, default: 0 },
    ...publicStyeProps,
  });

  const emits = defineEmits<{
    /** 监听播放事件 */
    (e: 'play'): void;
    /** 监听暂停事件 */
    (e: 'pause'): void;
    /** 监听播放完成 */
    (e: 'ended'): void;
    /** 监听点击事件 */
    (e: 'myClick'): void;
    /** 是否显示遮罩 */
    (e: 'maskChange', data?: { show: boolean; buttonBarHeight: number }): void;
    /** 视频元数据加载完成时触发 */
    (e: 'loadedmetadata', data?: { width: number; height: number; duration: number }): void;
    /** 视频加载失败的问题 */
    (e: 'error'): void;
    /** 浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时 */
    (e: 'loadstart'): void;
  }>();
  const appVideoRef = ref<InstanceType<typeof AppVideo> | null>(null);

  defineExpose({
    /** 停止视频 */
    stop() {
      appVideoRef.value?.stop();
    },
    /** 播放视频 */
    play() {
      appVideoRef.value?.play();
    },
    /** 暂停视频 */
    pause() {
      appVideoRef.value?.pause();
    },
    /** 跳转到多少秒 */
    seek(num: number) {
      appVideoRef.value?.seek(num);
    },
    /** 全屏 */
    requestFullScreen() {
      appVideoRef.value?.requestFullScreen();
    },
    /** 退出全屏 */
    exitFullScreen() {
      appVideoRef.value?.exitFullScreen();
    },
  });
</script>

<style lang="scss" scoped>
  .mxp-app-video {
    width: 100%;
    height: 100%;
  }
</style>
